<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>

    .outer {
        height: 100px;
    }

    .left {
        /*? 现在是靠在下面一行的最左*/
        float: left;
        /*? 设置margin-left为负值会让元素自身位置发生变化，由于浮动的关系，元素被往左拉了一个center元素的宽度(100%)故回到了开头(相当于从下一行的最左拉到上一行的最左)*/
        margin-left: -100%;
        width: 100px;
        height: 100px;
        background: tomato;
    }

    .right {
        /*? 现在是靠在下面一行的最右*/
        float: right;
        /*? right元素设置margin-left: -200px;拉回行尾*/
        margin-left: -200px;

        width: 200px;
        height: 100px;
        background: gold;
    }

    .center {
        float: left;
        width: 100%;
        height: 100px;
        background: lightgreen;
    }
</style>
<body>
<!--? 圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边-->
<a href="https://www.cnblogs.com/WuAnqi/p/15474196.html"></a>
<div class="outer">
    <!--? 中间得放最前面-->
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>
